import { Animated, StyleSheet, Text, View } from 'react-native'
import { flexCol } from '../../assets/style/common'
import { useCallback, useEffect, useRef, useState } from 'react'

export default function Countdown() {
  const [second, setSecond] = useState(0)
  const [minute, setMinute] = useState(0)
  const [hour, setHour] = useState(18)
  const wrapNum = useCallback((val: number) => {
    return val >= 10 ? '' + val : val < 0 ? '59' : '0' + val
  }, [])
  const animateHour = useRef(new Animated.Value(0)).current
  const animateMinute = useRef(new Animated.Value(0)).current
  const animateSecond = useRef(new Animated.Value(0)).current

  function initPosition() {
    Animated.timing(animateSecond, {
      toValue: 0,
      duration: 0,
      useNativeDriver: false,
    }).start()
    Animated.timing(animateMinute, {
      toValue: 0,
      duration: 0,
      useNativeDriver: false,
    }).start()
    Animated.timing(animateHour, {
      toValue: 0,
      duration: 0,
      useNativeDriver: false,
    }).start()
  }
  useEffect(() => {
    initPosition()
    let interval2: any
    const interval = setTimeout(() => {
      const newSecond = wrapNum(second - 1)
      let newMinute = minute + ''
      let newHour = hour + ''
      Animated.timing(animateSecond, {
        toValue: -16,
        duration: 300,
        useNativeDriver: false,
      }).start()

      if (newSecond === '59') {
        Animated.timing(animateMinute, {
          toValue: -16,
          duration: 300,
          useNativeDriver: false,
        }).start()
        newMinute = wrapNum(minute - 1)

        if (newMinute === '59') {
          Animated.timing(animateHour, {
            toValue: -16,
            duration: 300,
            useNativeDriver: false,
          }).start()
          newHour = wrapNum(hour - 1)
        }
      }

      interval2 = setTimeout(() => {
        setSecond(parseInt(newSecond, 10))
        newSecond === '59' && setMinute(parseInt(newMinute, 10))
        newMinute === '59' &&
          newSecond === '59' &&
          setHour(parseInt(newHour, 10))
      }, 300)
    }, 700)
    return () => {
      clearTimeout(interval2)
      clearTimeout(interval)
    }
  }, [second, minute, hour])
  return (
    <View style={flexCol.default}>
      <View style={styles.menuWrap}>
        <Animated.Text
          key="hour"
          style={[
            styles.menuDotTxt,
            {
              transform: [{ translateY: animateHour }],
            },
          ]}
        >
          {wrapNum(hour)}
        </Animated.Text>
        <Animated.Text
          key="hour1"
          style={[
            styles.menuDotTxt,
            {
              transform: [{ translateY: animateHour }],
            },
          ]}
        >
          {wrapNum(hour - 1)}
        </Animated.Text>
      </View>
      <Text style={styles.menuDot}>:</Text>
      <View style={styles.menuWrap}>
        <Animated.Text
          key="minute"
          style={[
            styles.menuDotTxt,
            {
              transform: [{ translateY: animateMinute }],
            },
          ]}
        >
          {wrapNum(minute)}
        </Animated.Text>
        <Animated.Text
          key="minute1"
          style={[
            styles.menuDotTxt,
            {
              transform: [{ translateY: animateMinute }],
            },
          ]}
        >
          {wrapNum(minute - 1)}
        </Animated.Text>
      </View>
      <Text style={styles.menuDot}>:</Text>
      <View style={styles.menuWrap}>
        <Animated.Text
          key="second"
          style={[
            styles.menuDotTxt,
            {
              transform: [{ translateY: animateSecond }],
            },
          ]}
        >
          {wrapNum(second)}
        </Animated.Text>
        <Animated.Text
          key="second1"
          style={[
            styles.menuDotTxt,
            {
              transform: [{ translateY: animateSecond }],
            },
          ]}
        >
          {wrapNum(second - 1)}
        </Animated.Text>
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  menuBtmTWrap: {
    flexDirection: 'column',
  },
  menuDotTxt: {
    height: 16,
    width: 18,
    fontSize: 10,
    color: '#fff',
    lineHeight: 16,
    textAlign: 'center',
  },
  menuDot: {
    color: '#ffc21d',
    paddingLeft: 2,
    paddingRight: 2,
    fontSize: 12,
    verticalAlign: 'middle',
    height: 15,
    lineHeight: 15,
  },
  menuWrap: {
    height: 16,
    width: 18,
    verticalAlign: 'middle',
    overflow: 'hidden',

    borderRadius: 2,
    backgroundColor: '#ffc21d',
  },
})
